<template>
   <div id="form-con">
      <g-banner :title="'动态表单'" :des="'某些字段可以添加和移除'"></g-banner>
      <h2 class="g-main-title pull-left">动态表单</h2>
      <div class="g-title-button pull-right">
         <el-button type="primary">保存</el-button>
         <el-button @click="handleSubmit" type="primary">提交</el-button>
         <el-button>返回</el-button>
      </div>
      <div class="clearfix"></div>
      <div class="g-box">
         <el-form :model="form" label-width="70px" class="form" :rules="formRules" ref="form">
            <el-form-item label="姓名" prop="name">
               <el-input v-model="form.name" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
               <el-radio label="0" v-model="form.sex">男</el-radio>
               <el-radio label="1" v-model="form.sex">女</el-radio>
            </el-form-item>
            <el-form-item label="国籍" prop="nation">
               <el-radio :label="item.value" v-model="form.nation" v-for="item in nationOption" :key="item.value">{{item.nationName}}</el-radio>
               <div class="nation-append" v-if="newNationShow">
                  <el-input v-model="newNation"></el-input>
                  <i class="el-icon-success" @click="addNewNation"></i>
                  <i class="el-icon-error" @click="cancelNewNation"></i>
               </div>
               <i class="el-icon-circle-plus" @click="handleNationAppend" v-else style="cursor: pointer"></i>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
               <el-input-number v-model="form.age"></el-input-number>
            </el-form-item>
            <el-form-item label="编程语言" prop="favor">
               <!-- 不使用v-for -->
               <el-select v-model="form.favor" class="input-width">
                  <el-option :value="0" :label="'java'"></el-option>
                  <el-option :value="1" :label="'C#'"></el-option>
                  <el-option :value="2" :label="'js'"></el-option>
                  <el-option :value="3" :label="'go'"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="职位" prop="work">
               <!-- 使用v-for -->
               <el-select v-model="form.work" class="input-width">
                  <el-option :value="item.value" :label="item.workName" v-for="item in workOption" :key="item.value"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="日期" prop="date">
               <el-date-picker v-model="form.date" class="input-width"></el-date-picker>
            </el-form-item>
            <el-form-item label="地域" prop="address">
               <el-cascader v-model="form.address" :options="options" class="input-width"></el-cascader>
            </el-form-item>
            <el-form-item label="收货地址" prop="address2">
               <div class="address-input" v-for="(item, index) in form.address2" :key="index">
                  <el-input v-model="form.address2[index]" class="input-width"></el-input>
                  <i class="el-icon-error icon" @click="removeAddress(index)"></i>
               </div>
               <el-button @click="newAddress2" type="primary">添加地址</el-button>
            </el-form-item>
         </el-form>
      </div>
   </div>
</template>

<script>
export default {
   data(){
      return{
         form: {
            name: '',
            sex: '0',
            nation: '0',
            age: 0,
            favor: '',
            work: '',
            date: '',
            address: [],
            address2: ['']
         },
         newNationShow: false,
         newNation: '',
         options: [
            {
               value: '0',
               label: '山东省',
               children: [
                  {
                     value: '0-0',
                     label: '济南市',
                     children: [
                        {
                           value: '0-0-0',
                           label: '市中区'
                        },
                        {
                           value: '0-0-1',
                           label: '济阳区'
                        },
                     ]
                  },
                  {
                     value: '0-1',
                     label: '淄博市',
                  },
                  {
                     value: '0-2',
                     label: '菏泽市',
                  },
               ]
            },
            {
               label: '浙江省',
               value: '1',
               children: [
                  {
                     label: '金华市',
                     value: '1-0'
                  },
                  {
                     label: '义乌市',
                     value: '1-1'
                  },
               ]
            }
         ],
         nationOption: [
           { value: '0', nationName: '中国' },
           { value: '1', nationName: '美国' },
           { value: '2', nationName: '韩国' },
           { value: '3', nationName: '日本' },
         ],
         workOption: [
            { value: '0', workName: '研发' },
            { value: '1', workName: '实施' },
            { value: '2', workName: '美工' },
            { value: '3', workName: '运维' },
            { value: '4', workName: '售前' },
         ],
         formRules: {
            name: [
               { required: true, message: '请输入姓名', trigger: 'blur' },
            ],
            age: [
               { validator: this.checkAge, message: '年龄不能为负数', trigger: 'blur' }
            ],
         }
      }
   },
   methods: {
      handleSubmit(){
         this.$refs.form.validate((isValid)=>{
            if(isValid){
               console.log(this.form)
               this.$message.success('提交成功')
            }else{
               return false
            }
         })
      },
      checkAge(rule, value, cb){
         if(value<0){
            cb(new Error())
         }else{
            cb()
         }
      },
      handleNationAppend(){
         this.newNationShow = true
      },
      addNewNation(){
         this.nationOption.push({
            value: this.newNation, nationName: this.newNation
         })
         this.newNationShow = false
         this.newNation = ''
      },
      cancelNewNation(){
         this.newNationShow = false
         this.newNation = ''
      },
      newAddress2(){
         this.form.address2.push('')
      },
      removeAddress(index){
         this.form.address2.splice(index, 1)
      }
   }
}
</script>

<style lang="scss" scoped>
.form {
   width: 50%;
   margin: 0 auto;
}
.input-width{
   width: 300px;
}
/deep/ .el-select{
   width: 300px;
}
/deep/ .el-radio, /deep/ .el-date-editor{
   margin: 0 10px;
}
.nation-append{
   width: 140px;
   display: inline-block;
   margin-left: 5px;
   /deep/ .el-input.el-input--small{
      width: 100px;
   }
   i{
      margin-left: 5px;
      cursor: pointer;
   }
   /deep/ .el-input--small .el-input__inner{
      height: 20px;
      line-height: 20px;
   }
}
.icon{
   cursor: pointer;
   margin-left: 10px;
}
.address-input{
   margin-bottom: 10px;
   i{
      margin-left: 5px;
   }
}
</style>